import { Button, Checkbox, Form, Input, message as antdMessage } from 'antd';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { signin } from '../../api';
import { useAppDispatch } from '../../app/hooks';
import { loginFail, loginSuccess } from '../../app/user/userSlice';
const App: React.FC = () => {
	const dispatch = useAppDispatch()
	const navigate = useNavigate()
	const onFinish = async (values: any) => {
		const resp = await signin(values)
		const { code, data, message } = resp.data;
		if (code === 200) {
			dispatch(loginSuccess(data));
			antdMessage.success(message)
			navigate('/home')
		} else {
			dispatch(loginFail());
			antdMessage.error(message)
		}
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	};

	return (
		<div style={{ width: 600, margin: 'auto' }}>
			<Form
				name="basic"
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 20 }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off"
			>
				<Form.Item
					label="Username"
					name="username"
					rules={[{ required: true, message: 'Please input your username!' }]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label="Password"
					name="password"
					rules={[{ required: true, message: 'Please input your password!' }]}
				>
					<Input.Password />
				</Form.Item>

				<Form.Item wrapperCol={{ offset: 4, span: 20 }}>
					<Button type="primary" htmlType="submit">
						Submit
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
};

export default App;